<template>
  <Nav />
  <div class="page-box">
    <div class="header">
      <img src="@/assets/box/header.png" class="animate__pulse animate__animated animate__infinite animate__slower">
    </div>
    <div class="box">
      <img src="@/assets/box/box.png" class="animate__animated animate__infinite animate__slow" :class="{'animate__shakeX': loading, 'animate__updown': !loading}">
      <Open @load='load' @over="over" />
    </div>
    <div class="pay">
      <div class="btn" @click="diy.open()">{{ $t('box.pay') }}</div>
      <div class="btn" @click="buy.open()">{{ $t('box.buy') }}</div>
    </div>
  </div>
  <Diy ref="diy" @confirm="pay" />
  <Buy ref="buy" @load="load" @over="over" />
  <md-landscape v-model="ok">
    <div class="components-ok">
      <img src="@/assets/box/ok.png">
      <div class="btn" @click="router.push('/nft')">{{ $t('box.btn') }}</div>
    </div>
  </md-landscape>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getTransfer, transfer, address } from '@/web3/contracts/pay';
import { allowance, approve, balance } from '@/web3/contracts/usdt';
import { toast } from '@/style'
import { t } from '@/lang'
import Nav from '@/components/nav.vue'
import Open from './open.vue'
import Diy from './diy.vue'
import Buy from './buy.vue'

const router = useRouter()
const diy = ref(null)
const buy = ref()

// 开启中
const loading = ref(false)
// 成功
const ok = ref(false)

// 价格
const price = ref('0')
getTransfer().then(res => {
  price.value = res[0]
})

// 加载
const load = () => {
  toast(t('box.loading'), 'ring', 0)
  loading.value = true
}

// 完成
const over = () => {
  toast(false)
  ok.value = true
  loading.value = false
}

// 开始抽
const pay = async(num) => {
  // 运算价格
  const amount = price.value * num
  // 开始检测usdt
  if(Number(await balance()) < Number(amount)){
    return toast(t('box.balance'))
  }
  // 判断可用对比价格
  if(Number(await allowance(address)) < Number(amount)) {
    // 授权
    toast(t('contracts.usdt.approve'), 'ring', 0)
    try{
      await approve(address)
    } catch(e) {
      return toast(false)
    }
  }
  // 开始转入
  load()
  transfer(num).then(() => {
    over()
  }).catch(() => {
    toast(t('box.error'))
  }).finally(() => {
    loading.value = false
  })

}
</script>

<style lang="scss" scoped>
  .page-box{
    min-height: 100%;
    background: url('@/assets/box/bj.jpg') center center no-repeat;
    background-size: cover;

    .header{
      width: 250px;
      padding-top: 100px;
      margin: 0 auto;
      position: relative;

      img{ 
        width: 100%;
      }
    }

    .box{
      width: 180px;
      padding-top: 70px;
      margin: 0 auto;
      position: relative;

      img{ 
        width: 100%;
      }
      
    }

    .pay{
      margin-top: 50px;
      padding: 20px;
      display: flex;
      justify-content: space-around;
    }

    .btn{
      width: 40%;
      border-radius: 30px;
      background-image: linear-gradient(to right, #e33ffe , #0565f8);
      color: #fff;
      font-size: 16px;
      line-height: 40px;
      text-align: center;  
    }
  }
  
  .components-ok{
    width: 300px;
    position: relative;
    
    img{
      width: 100%;
    }
    
    .btn{
      position: absolute;
      bottom: 70px;
      right: 0;
      left: 0;
      margin: 0 auto;
      width: 120px;
      color: #90732c;
      line-height: 40px;
      border-radius: 40px;
      text-align: center;
      background-image: linear-gradient(to right, #f3cb0b, #cf9f19);
      
    }
  }
</style>